<template>
	<view>
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
		<view class="page_height_box">
		<view v-if="today_info==null">
			<zero-loading type="triangle"></zero-loading>
		</view>
		<view v-if="today_info!=null">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="main">
				<view class="tab">
					<view class="li" :class="select_index==0?'active':''" @click="handleSelect(0)">订单明细</view>
					<view class="li" :class="select_index==1?'active':''" @click="handleSelect(1)">月订单</view>
				</view>
				<view v-if="select_index==0">
					<view class="info">
						<view class="top">
							<view class="li">
								<view class="h1">
									<text>{{today_info.today}}</text>单
								</view>
								<view class="h2">完成订单</view>
							</view>
							<view class="li">
								<view class="h1">
									<text>{{today_info.change}}</text>单
								</view>
								<view class="h2">转单</view>
							</view>
							<view class="li">
								<view class="h1">
									<text>{{today_info.grade}}</text>单
								</view>
								<view class="h2">已抢订单</view>
							</view>
							<view class="li">
								<view class="h1">
									<text>{{today_info.discount}}</text>km
								</view>
								<view class="h2">配送里程</view>
							</view>
						</view>
						<view class="btm">
							收益相关信息请前往“我的钱包”查看
						</view>
					</view>
					<view class="nav">
						<view class="fl" @click="onShowDatePicker('range')">
							<text>{{range[0].slice(5,11)}}至{{range[1].slice(5,11)}}</text>
							<image src="../../static/images/icon37.png"></image>
						</view>
						<view class="fr">
							<text :class="select_item_index==0?'active':''" @click="handleItemSelect(0)">全部</text>
							<text :class="select_item_index==1?'active':''" @click="handleItemSelect(1)">已完成</text>
							<text :class="select_item_index==2?'active':''" @click="handleItemSelect(2)">已转单</text>
						</view>
					</view>
				</view>
			</view>
			<!--<view class="statistics_title">订单统计</view>
			<view class="statistics_select_box">
				<view class="statistics_select_item" :class="select_index==0?'statistics_select_item_active':''" @click="handleSelect(0)">
					订单明细<view class="statistics_select_item_heng" v-show="select_index==0"></view>
				</view>
				<view class="statistics_select_item" :class="select_index==1?'statistics_select_item_active':''" @click="handleSelect(1)">
					月订单<view class="statistics_select_item_heng" v-show="select_index==1"></view>
				</view>
			</view>	-->
			<!--<view class="day_statistics_box" v-if="select_index==0">
				<view style="height: 24rpx;"></view>
				<view class="day_statistics_center" v-if="today_info">
					<view class="day_statistics_center_top">
						<view class="day_statistics_center_item">
							<view class="day_statistics_center_item_name">
								{{today_info.today}} <text>单</text>
							</view>
							<view class="day_statistics_center_item_desc">完成订单</view>
							<view class="day_statistics_center_item_shu"></view>
						</view>
						<view class="day_statistics_center_item">
							<view class="day_statistics_center_item_name">
								{{today_info.change}}  <text>单</text>
							</view>
							<view class="day_statistics_center_item_desc">转单</view>
							<view class="day_statistics_center_item_shu"></view>
						</view>
						<view class="day_statistics_center_item">
							<view class="day_statistics_center_item_name">
								{{today_info.grade}} <text>单</text>
							</view>
							<view class="day_statistics_center_item_desc">已抢订单</view>
							<view class="day_statistics_center_item_shu"></view>
						</view>
						<view class="day_statistics_center_item">
							<view class="day_statistics_center_item_name">
								{{today_info.discount}} <text>km</text>
							</view>
							<view class="day_statistics_center_item_desc">配送里程</view>
						</view>
					</view>
					<view class="day_statistics_center_bottom">
						收益相关信息请前往“我的钱包”查看
					</view>
				</view>
				<view class="day_statistics_select_box">
					&lt;!&ndash; <view class="day_statistics_select_left">订单明细</view> &ndash;&gt;
					<view class="profit_content_top_item" @click="onShowDatePicker('range')">
						<view class="picker-wrap">
							<view class="picker-input">{{range[0].slice(5,11)}}至{{range[1].slice(5,11)}}</view>
							<image class="picker-icon" src="https://www.cccshansong.com/chong_weapp/bottom_black.png"></image>
						</view>
					</view>
					<view class="day_statistics_select_right">
						<view class="day_statistics_select_right_item" :class="select_item_index==0?'day_statistics_select_right_item_active':''" @click="handleItemSelect(0)">全部</view>
						<view class="day_statistics_select_right_item" :class="select_item_index==1?'day_statistics_select_right_item_active':''" @click="handleItemSelect(1)">已完成</view>
						<view class="day_statistics_select_right_item" :class="select_item_index==2?'day_statistics_select_right_item_active':''" @click="handleItemSelect(2)">已转单</view>
					</view>
				</view>
			</view>-->

			<view class="order_statistics_content_box" v-if="select_index==0">
				<view class="orderList">
					<view class="li" v-for="(data,index) in list" :key="index" @click="handleDetail(data)">
						<view class="top">
							<view class="fl">
								<view class="h2">外卖配送</view>
								<view class="h1"><text>￥</text>{{data.price_complete.rider_actual_price}}</view>
							</view>
						</view>
						<view class="center">
							<view class="start">
								<view class="fl">
									<view class="h1" v-if="data.merchant&&data.merchant.shop_name!=''">
										{{data.merchant.shop_name}}
									</view>
									<view class="h1" v-if="!data.merchant">
										--
									</view>
									<view class="h2">
										<image src="../../static/images/icon07.png"></image>
										<view class="h2Con">
											{{data.sender_address}}
										</view>
									</view>
								</view>
								<!--<view class="fr">
									<view class="h1">500</view>
									<view class="h2">KM</view>
								</view>-->
							</view>
							<view class="end">
								<view class="fl">
									<view class="h1">{{data.receiver_address}}</view>
<!--									<view class="h2">备注：<text>别敲门，放门口就行</text></view>-->
								</view>
								<!--<view class="fr">
									<view class="h1">200</view>
									<view class="h2">KM</view>
								</view>-->
							</view>
						</view>
						<view class="btn">
							<template v-if="select_item_index==0">
								<view class="orderNo">订单编号：<text>{{data.order_no?data.order_no:'--'}}</text></view>
								<view class="cancel" v-if="data.status=='PENDING'">待接单</view>
								<view class="cancel" v-if="data.status=='GRABBED'">待到店</view>
								<view class="cancel" v-if="data.status=='PICKUP'">待取货</view>
								<view class="cancel" v-if="data.status=='DELIVERING'">配送中</view>
								<view class="cancel" v-if="data.status=='DONE'">已完成</view>
								<view class="cancel" v-if="data.status=='CANCEL'">已取消</view>
							</template>
							<template v-if="select_item_index==1">
								<view class="orderNo">订单编号：<text>{{data.order_no?data.order_no:'--'}}</text></view>
								<view class="cancel" v-if="data.status=='DONE'">已完成</view>
							</template>
							<template v-if="select_item_index==2">
								<view class="orderNo">订单编号：<text>{{data.order_no?data.order_no:'--'}}</text></view>
								<view class="cancel" v-if="select_item_index==2">已转单</view>
							</template>

						</view>
					</view>
				</view>
				<!--<view class="scroll_item_order_box" v-for="(data,index) in list" :key="index" @click="handleDetail(data)">
					<view class="scroll_item_order_top_box">
						<view class="scroll_item_order_top_time" v-if="data.status=='DONE'">
							完成时间：{{data.delivery_at}}
						</view>
						<view class="scroll_item_order_top_time" v-if="data.status!='DONE'">

						</view>
						<view class="scroll_item_order_top_price">
							<view class="scroll_item_order_status">外卖配送</view>
							<view class="scroll_item_order_top_price_num" v-if="data.price_complete">
								<text>¥</text>{{data.price_complete.rider_actual_price}}
							</view>
						</view>
					</view>
					<view class="scroll_item_order_center_box">
						<view class="qu_address_item_box">
							<view class="qu_address_item_left_box">
								<view class="qu_address_icon_box">
									<image src="https://www.cccshansong.com/chong_weapp/qu_icon.png" mode="" style="margin-top: 10rpx;"></image>
								</view>
								<view class="qu_address_box">
									<view class="qu_address_title" v-if="data.merchant&&data.merchant.shop_name!=''">{{data.merchant.shop_name}}</view>
									<view class="qu_address_title" v-if="!data.merchant">&#45;&#45;</view>
									<view class="qu_address_desc">{{data.sender_address}}</view>
								</view>
							</view>

						</view>
						<view class="qu_address_item_box" style="margin-top: 36rpx;">
							<view class="qu_address_item_left_box">
								<view class="qu_address_icon_box">
									<image src="https://www.cccshansong.com/chong_weapp/song_icon.png" mode="" style="margin-top: 10rpx;"></image>
								</view>
								<view class="qu_address_box">
									<view class="qu_address_title">{{data.receiver_address}}</view>
									&lt;!&ndash; <view class="qu_address_desc">沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场沂蒙路九州购物广场档位B-02号</view>	 &ndash;&gt;
								</view>
							</view>

						</view>
						<view class="scroll_item_order_status_box" v-if="select_item_index==0">
							<view class="scroll_item_order_status_box_no">订单编号：{{data.order_no?data.order_no:'&#45;&#45;'}}</view>
							<view class="scroll_item_order_status_box_text" v-if="data.status=='PENDING'">待接单</view>
							<view class="scroll_item_order_status_box_text" v-if="data.status=='GRABBED'">待到店</view>
							<view class="scroll_item_order_status_box_text" v-if="data.status=='PICKUP'">待取货</view>
							<view class="scroll_item_order_status_box_text" v-if="data.status=='DELIVERING'">配送中</view>
							<view class="scroll_item_order_status_box_text" v-if="data.status=='DONE'">已完成</view>
							<view class="scroll_item_order_status_box_text" v-if="data.status=='CANCEL'">已取消</view>
						</view>
						<view class="scroll_item_order_status_box" v-if="select_item_index==1">
							<view class="scroll_item_order_status_box_no">订单编号：{{data.order_no?data.order_no:'&#45;&#45;'}}</view>
							<view class="scroll_item_order_status_box_text" v-if="data.status=='DONE'">已完成</view>
						</view>
						<view class="scroll_item_order_status_box" v-if="select_item_index==2">
							<view class="scroll_item_order_status_box_no">订单编号：{{data.order_no?data.order_no:'&#45;&#45;'}}</view>
							<view class="scroll_item_order_status_box_text">已转单</view>
						</view>
					</view>
				</view>-->

				<view class="page_tip" v-if="list.length>0">我是有底线的~</view>
				<view  style="height:80rpx;"></view>
				<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;" >
					<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
					<view class="null_tip">这里空空如也~</view>
				</view>
			</view>
			<view class="order_statistics_month_box" v-if="select_index==1" >
				<view class="order_statistics_month_item" v-for="(data,index) in month_list" :key="index">
					<view class="order_statistics_month_item_title">{{data.month}} <text>月</text></view>
					<view class="order_statistics_month_item_content">
						<view class="day_statistics_center_item">
							<view class="day_statistics_center_item_name">
								{{data.today}} <text>单</text>
							</view>
							<view class="day_statistics_center_item_desc">完成订单</view>
							<view class="day_statistics_center_item_shu"></view>
						</view>
						<view class="day_statistics_center_item">
							<view class="day_statistics_center_item_name">
								{{data.change}} <text>单</text>
							</view>
							<view class="day_statistics_center_item_desc">转单</view>
							<view class="day_statistics_center_item_shu"></view>
						</view>
						<view class="day_statistics_center_item">
							<view class="day_statistics_center_item_name">
								{{data.discount}} <text>km</text>
							</view>
							<view class="day_statistics_center_item_desc">配送里程</view>
						</view>
					</view>
				</view>

				<view class="page_tip" v-if="month_list.length>0">我是有底线的~</view>
				<view  style="height:80rpx;"></view>
				<view class="null_box" v-if="month_list.length==0" style="padding-top: 80rpx;" >
					<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
					<view class="null_tip">这里空空如也~</view>
				</view>
			</view>
		</view>
	</view>
	</view>
	</dcp-scroller>
	<mx-date-picker :format='format' :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'"  @confirm="ed" @cancel="ed" />
	</view>
</template>

<script>
	import {} from "@/utils/date.js"
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import zeroLoading from "@/components/zero-loading/components/zero-loading/zero-loading.vue"
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
			zeroLoading,
			MxDatePicker,
		},
		data() {
			return {
				format:'yyyy-mm-dd',
				showPicker: false,
				range:['',''],
				type: 'rangetime',
				value: '',
				isLoading:false,
				select_btn_status:true,
				count:0,
				list:[],
				month_list:[],
				page:1,
				today_info: null,
				select_index:0,
				select_item_type:'all',
				select_item_index:0,
				info: null,
				statusHeight: 0,
				config: {
					title: "订单统计", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad() {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 46

			var date = new Date().Format("yyyy-MM-dd")
			const today = new Date();
			const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
			var firstDayOfMonthDate = firstDayOfMonth.Format("yyyy-MM-dd")

			a.range = [firstDayOfMonthDate,date]
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.opacity = 1
				a.config.bgcolor = 'rgba(255,255,255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255,255,255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255,255,255,1)'
			}
			if (res.scrollTop < 50) {
				a.opacity = 0
			}
			if (res.scrollTop == 0) {
				a.opacity = 0
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		onShow(){
			var a = this
			a.list = []
			a.month_list = []
			a.getTodayInfo()
			a.getMonthStatistics()
		},
		onPullDownRefresh(){
			var a = this
			a.list = []
			a.month_list = []
			a.getTodayInfo()
			a.getMonthStatistics()
		},

		methods: {
			refresh(){
				var a = this
				a.isLoading = true;
				setTimeout(()=>{
					a.list = []
					a.month_list = []
					a.getTodayInfo()
					a.getMonthStatistics()
				},200)
			},
			onShowDatePicker(type){//显示
			    this.type = type;
			    this.showPicker = true;
			    this.value = this[type];
			},
			ed(e) {//选择
			    this.showPicker = false;
			    if(e) {
			        this[this.type] = e.value;
			        //选择的值
			        console.log('value => '+ e.value);
					var a = this
					a.list = []
					a.getTodayInfo()
			        //原始的Date对象
			        console.log('date => ' + e.date);
			    }
			},

			handleDetail(data){
				// if(data.status=='DONE'){
				// 	uni.navigateTo({
				// 		url:'/pages/index/orderDetail?id=' + data.id
				// 	})
				// }
				uni.navigateTo({
					url:'/pages/index/orderDetail?id=' + data.id
				})
			},
			getMonthStatistics(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('order/monthStatistics',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.month_list = res.data.data
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			getTodayInfo(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				var temp_range = a.range
				var temp_date = temp_range[1]
				var date = new Date(temp_date);
				date.setDate(date.getDate() + 1);

				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();

				var new_date = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				a.globalajax('order/orderStatistics',{
					type:a.select_item_type,
					start:temp_range[0],
					end:new_date
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						a.isLoading = false
						setTimeout(()=>{
							a.select_btn_status = true
						},1500)
						if(res.data.code==200){
							a.today_info = res.data.data
							var arr = res.data.data.order
							for (var i = 0; i < arr.length; i++) {
								arr[i].price_complete = JSON.parse(arr[i].price)
								arr[i].receiver_address_detail_complete = JSON.parse(arr[i].receiver_address_detail)
								arr[i].sender_address_detail_complete = JSON.parse(arr[i].sender_address_detail)
							}
							a.list = arr
							console.log('----------',a.list)
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			handleSelect(index){
				this.select_index = index
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleItemSelect(index){
				var a = this
				if(a.select_btn_status){
					a.select_btn_status = false
					a.select_item_index = index
					if(index==0){
						a.select_item_type = 'all'
					}else if(index==1){
						a.select_item_type = 'done'
					}else if(index==2){
						a.select_item_type = 'change'
					}
					a.list = []
					a.getTodayInfo()
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}

	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height:664rpx;

		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		.main{
			padding: 56rpx 32rpx 0 32rpx;
			.tab{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.li{
					width: 319rpx;
					height: 72rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #FFFFFF;
					text-align: center;
					line-height: 72rpx;
					font-size: 32rpx;
					color: #fff;
					&.active{
						background: #418AFF;
					}
				}
			}
			.info{
				background: rgba(255,255,255,0.6);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 30rpx 24rpx 24rpx 24rpx;
				margin-top: 32rpx;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 14rpx 28rpx 14rpx;
					border-bottom: 1rpx solid #418AFF;
					.li{
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						.h1{
							font-size: 24rpx;
							color: #666;
							text{
								font-size: 48rpx;
								color: #418AFF;
							}
						}
						.h2{
							font-size: 24rpx;
							color: #666;
							margin-top: 8rpx;
						}
					}
				}
				.btm{
					padding-top: 24rpx;
					font-size: 24rpx;
					color: #0062FF;
					text-align: center;

				}
			}
			.nav{
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.fl{
					width: 246rpx;
					height: 64rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						font-size: 24rpx;
						color: #333;
					}
					image{
						width: 16rpx;
						height: 16rpx;
						margin-left: 12rpx;
					}
				}
				.fr{
					height: 64rpx;
					background: #ddd;
					padding: 4rpx;
					box-sizing: border-box;
					border-radius: 12rpx;
					text{
						width: 116rpx;
						height: 56rpx;
						border-radius: 8rpx;
						text-align: center;
						line-height: 56rpx;
						font-size: 24rpx;
						color: #666;
						display: inline-block;
						&.active{
							background: #fff;
							font-size: 28rpx;
							color: #418AFF;
						}
					}
				}
			}
		}
		.statistics_title{
			color: rgba(36, 40, 49, 1);
			font-size: 44rpx;
			font-weight:550;
			padding-left: 24rpx;
		}
		.order_statistics_month_box{
			// padding-top: 36rpx;
			margin-top: 40rpx;
			.order_statistics_month_item{
				width: 702rpx;
				height: 242rpx;
				background-color: #fff;
				margin: 0 auto;
				margin-bottom:20rpx ;
				border-radius: 16rpx;
				.order_statistics_month_item_title{
					padding-top: 20rpx;
					padding-left: 24rpx;
					font-weight: bold;
					color: rgba(36, 40, 49, 1);
					font-size: 56rpx;
					text{
						font-size: 28rpx;
						margin-left: 6rpx;
					}
				}
				.order_statistics_month_item_content{
					width: 654rpx;
					height: 120rpx;
					background-color: rgba(245, 246, 248, 1);
					margin: 0 auto;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 6rpx;
					.day_statistics_center_item{
						width: 33%;
						display: flex ;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						position: relative;
						.day_statistics_center_item_shu{
							position: absolute;
							bottom:20rpx;
							right: 0;
							width: 2rpx;
							height: 32rpx;
							background-color: rgba(228, 231, 237, 1);
						}
						.day_statistics_center_item_desc{
							color: rgba(36, 40, 49, 1);
							font-size: 22rpx;
						}
						.day_statistics_center_item_name{
							color: rgba(36, 40, 49, 1);
							font-size: 40rpx;
							font-weight: bold;
							text{
								font-weight: 400;
								font-size: 22rpx;
								margin-left: 6rpx;
							}
						}
					}
				}
			}
		}
		.order_statistics_content_box{
			padding-top: 24rpx;
			.orderList{
				padding: 0 32rpx;
				.li{
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.12);
					border-radius: 24rpx;
					padding: 16rpx 24rpx 24rpx 24rpx;
					margin-bottom: 32rpx;
					.top{
						height: 68rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1rpx solid #418AFF;
						padding-bottom: 12rpx;
						.fl{
							display: flex;
							align-items: center;
							.h2{
								width: 128rpx;
								height: 42rpx;
								background: #418AFF;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								text-align: center;
								line-height: 42rpx;
								font-size: 24rpx;
								color: #fff;
							}
							.h1{
								font-size: 48rpx;
								color: #FF3C26;
								font-weight: bold;
								margin-left: 32rpx;
								text{
									font-size: 28rpx;
									font-weight: 400;
								}
							}
						}
						.fr{
							display: flex;
							align-items: center;
							.h1{
								width: 74rpx;
								height: 40rpx;
								background: #FF9626;
								border-radius: 32rpx 8rpx 8rpx 32rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								image{
									width: 25rpx;
									height: 24rpx;
								}
								text{
									font-size: 20rpx;
									color: #fff;
									margin-left: 8rpx;
									display: inline-block;
								}
							}
							.h2{
								font-size: 28rpx;
								color: #418AFF;
								margin-left: 8rpx;
							}
							.h3{
								font-size: 28rpx;
								color: #666;
							}
						}
					}
					.btn{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30rpx;
						.orderNo{
							width: 360rpx;
							height: 64rpx;
							background: #EEEEEE;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							font-size: 24rpx;
							color: #333;
							text-align: center;
							line-height: 64rpx;
							text{
								color: #666;
							}
						}
						.cancel{
							width: 240rpx;
							height: 64rpx;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							border: 2rpx solid #999999;
							text-align: center;
							line-height: 64rpx;
							font-size: 28rpx;
							color: #666;
							box-sizing: border-box;
						}
					}
					.center{
						padding-top: 24rpx;
						.start{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.fl{
								.h1{
									padding-left: 48rpx;
									position: relative;
									font-size: 32rpx;
									color: #333;
									&:after{
										content: '';
										display: block;
										width: 16rpx;
										height: 16rpx;
										background: #418AFF;
										position: absolute;
										left: 8rpx;
										top: 50%;
										transform: translateY(-50%);
										border-radius: 50%;
									}
								}
								.h2{
									display: flex;
									margin-top: 8rpx;
									align-items: center;
									image{
										width: 32rpx;
										height: 62rpx;
									}
									.h2Con{
										flex: 1;
										padding-left: 16rpx;
										font-size: 24rpx;
										color: #666;
									}
								}
							}
							.fr{
								text-align: center;
								.h1{
									font-size: 20rpx;
									color: #418AFF;
								}
								.h2{
									font-size: 26rpx;
									color: #666;
								}
							}
						}
						.end{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 20rpx;
							.fl{
								.h1{
									padding-left: 48rpx;
									position: relative;
									font-size: 32rpx;
									color: #333;
									&:after{
										content: '';
										display: block;
										width: 16rpx;
										height: 16rpx;
										background: #FF3C26;
										position: absolute;
										left: 8rpx;
										top: 20rpx;
										border-radius: 50%;
									}
								}
								.h2{
									padding-left: 48rpx;
									font-size: 24rpx;
									color: #418AFF;
									margin-top: 8rpx;
									text{
										color: #666;
									}
								}
							}
							.fr{
								text-align: center;
								.h1{
									font-size: 20rpx;
									color: #418AFF;
								}
								.h2{
									font-size: 26rpx;
									color: #666;
								}
							}
						}
						.notes{
							height: 62rpx;
							background: #EEEEEE;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							padding: 0 16rpx;
							line-height: 62rpx;
							display: flex;
							align-items: center;
							margin-top: 24rpx;
							.h1{
								font-size: 24rpx;
								color: #333;
							}
							.h2{
								font-size: 24rpx;
								color: #666;
								flex:1;
							}
						}

						.scroll_item_order_btn_box {
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 26rpx;

							.scroll_item_order_btn1 {
								width: 228rpx;
								height: 88rpx;
								line-height: 88rpx;
								text-align: center;
								color: #fff;
								background-color: rgba(255, 168, 0, 1);
								border-radius: 12rpx;
								font-size: 32rpx;
								margin-right: 20rpx;
							}

							.scroll_item_order_btn2 {
								flex:1;
								height: 88rpx;
								line-height: 88rpx;
								text-align: center;
								color: #fff;
								background-color: #418AFF;
								border-radius: 12rpx;
								font-size: 32rpx;
							}

							.scroll_item_order_btn3 {
								height: 88rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								padding: 0 16rpx;
								margin-right: 20rpx;
								text{
									color: rgba(96, 98, 102, 1);
									font-size: 24rpx;
									padding-top: 10rpx;
									padding-bottom: 0;
								}
								image {
									width: 36rpx;
									height: 36rpx;
								}
							}

							.scroll_item_order_btn4 {
								width: 544rpx;
								height: 88rpx;
								line-height: 88rpx;
								text-align: center;
								color: #fff;
								background-color: rgba(0, 117, 255, 1);
								border-radius: 12rpx;
								font-size: 32rpx;
							}

							.scroll_item_order_btn5 {
								width: 544rpx;
								height: 88rpx;
								line-height: 88rpx;
								text-align: center;
								color: #fff;
								background-color: rgba(44, 190, 118, 1);
								border-radius: 12rpx;
								font-size: 32rpx;
							}
						}
					}
				}
			}
			.scroll_item_order_box{
				width: 702rpx;
				min-height: 316rpx;
				padding-bottom: 24rpx;
				background-color: #fff;
				margin: 0 auto;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				.scroll_item_order_status_box{
					display: flex;
					align-items: center;
					margin-left: 78rpx;
					margin-top: 20rpx;
					justify-content: space-between;
					.scroll_item_order_status_box_no{
						color: rgba(144, 147, 153, 1);
						font-size: 24rpx;
					}
					.scroll_item_order_status_box_text{
						color: rgba(144, 147, 153, 1);
						font-size: 24rpx;
						margin-right: 26rpx;
					}
					.scroll_item_order_status{
						height: 48rpx;
						line-height: 48rpx;
						padding: 0 16rpx;
						border-radius: 6rpx;
						background-color: rgba(255, 107, 0, 1);
						color: #fff;
						font-size: 24rpx;
						margin-right: 20rpx;
					}
					.scroll_item_order_status1{
						background-color: rgba(3, 214, 214, 1);
					}
					.scroll_item_order_status2{
						background-color: rgba(0, 124, 239, 1);
					}
					.scroll_item_order_status3{
						background-color: rgba(44, 190, 118, 1);
					}
					.scroll_item_order_status_phone{
						height: 48rpx;
						line-height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 16rpx;
						color: rgba(36, 40, 49, 1);
						font-size: 28rpx;
						border: 2rpx solid rgba(228, 231, 237, 1);
						border-radius: 6rpx;
						text{
							color: rgba(255, 107, 0, 1);
						}
						image{
							width: 32rpx;
							height: 32rpx;
							margin-left: 14rpx;
						}
					}
				}
				.scroll_item_order_btn_box{
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 26rpx;
					.scroll_item_order_btn1{
						width: 228rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color: rgba(255, 168, 0, 1);
						border-radius: 12rpx;
						font-size: 32rpx;
						margin-right: 20rpx;
					}
					.scroll_item_order_btn2{
						width: 414rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color: rgba(255, 107, 0, 1);
						border-radius: 12rpx;
						font-size: 32rpx;
					}
					.scroll_item_order_btn3{
						height: 88rpx;
						line-height: 88rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 0 16rpx;
						margin-right: 20rpx;
						image{
							width: 48rpx;
							height: 76rpx;
						}
					}
					.scroll_item_order_btn4{
						width: 544rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color:rgba(0, 117, 255, 1);
						border-radius: 12rpx;
						font-size: 32rpx;
					}
					.scroll_item_order_btn5{
						width: 544rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color:rgba(44, 190, 118, 1);
						border-radius: 12rpx;
						font-size: 32rpx;
					}
				}
				.scroll_item_order_remark_box{
					width: 630rpx;
					// min-height: 64rpx;
					padding-top: 12rpx;
					padding-bottom: 12rpx;
					padding-left: 16rpx;
					padding-right: 16rpx;
					margin: 0 auto;
					margin-top: 24rpx;
					background-color: rgba(245, 246, 248, 1);
					font-size: 26rpx;
					color: rgba(96, 98, 102, 1);
					text{
						color: rgba(48, 49, 51, 1);
					}
				}
				.scroll_item_order_center_box{
					margin-top: 10rpx;
					.qu_address_item_box{
						display: flex;
						justify-content: space-between;
						.dh_icon_box{
							width: 56rpx;
							height: 56rpx;
							margin-right: 20rpx;
							margin-top: 10rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.qu_address_item_left_box{
							display: flex;
							.qu_address_icon_box{
								margin-left: 20rpx;
								width: 46rpx;
								height: 36rpx;
								image{
									width: 46rpx;
									height: 36rpx;
								}
							}
							.qu_address_box{
								margin-left: 20rpx;
								.qu_address_title{
									color: rgba(36, 40, 49, 1);
									font-size: 36rpx;
									font-weight: bold;
									width: 454rpx;
									white-space: nowrap;
								    text-overflow: ellipsis;
								    overflow: hidden;
								    word-break: break-all;
								}
								.qu_address_desc{
									color: rgba(96, 98, 102, 1);
									font-size: 26rpx;
									width: 454rpx;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
									word-break: break-all;
									margin-top: 6rpx;
								}
							}
						}
					}


				}
				.scroll_item_order_top_box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 20rpx;
					.scroll_item_order_top_price{
						display: flex;
						align-items: center;
						padding-right: 20rpx;
						.scroll_item_order_top_price_tip{
							color: rgba(144, 147, 153, 1);
							font-size: 26rpx;
							margin-right: 10rpx;
						}
						.scroll_item_order_status{
							height: 48rpx;
							line-height: 48rpx;
							padding: 0 16rpx;
							border-radius: 6rpx;
							background-color: rgba(255, 107, 0, 1);
							color: #fff;
							font-size: 24rpx;
							margin-right: 20rpx;
						}
						.scroll_item_order_top_price_num{
							color: rgba(255, 107, 0, 1);
							font-size: 44rpx;
							font-weight: bold;
							text{
								font-weight: 400;
								font-size: 28rpx;
								margin-right: 6rpx;
							}
						}
					}
					.scroll_item_order_top_time{
						display: flex;
						align-items: center;
						color: rgba(144, 147, 153, 1);
						font-size: 24rpx;
						margin-left: 20rpx;
						image{
							width: 28rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}
		.day_statistics_box{
			width: 750rpx;
			height: 360rpx;
			/*background-color: #fff;*/
			.day_statistics_select_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 36rpx;
				.day_statistics_select_left{
					color: rgba(36, 40, 49, 1);
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 24rpx;
				}
				.profit_content_top_item{
					width: 200rpx;
					height: 60rpx;
					margin-left: 24rpx;
					picker {
						width: 200rpx;
						height: 88rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.picker-wrap{
						width: 260rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						// margin-left: 20rpx;
					}
					.picker-input {
						font-size: 30rpx;
						color: #303133;
						line-height:50rpx;
						text{
							// font-weight: 400;
							font-size: 26rpx;
							margin: 0 6rpx;
						}
					}
					.picker-icon {
						display: inline-block;
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
						line-height: 50rpx;
					}
					.log-picker {
						display: flex;
						align-items: center;
						width: 343rpx;
						height: 88rpx;
						.picker-wrap {
							display: flex;
							align-items: center;
						}
					}
				}
				.day_statistics_select_right{
					margin-right: 24rpx;
					width: 356rpx;
					height: 60rpx;
					background-color: rgba(0, 0, 0, 0.05);
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.day_statistics_select_right_item{
						width: 116rpx;
						height: 52rpx;
						border-radius: 8rpx;
						text-align: center;
						line-height: 52rpx;
						color: rgba(96, 98, 102, 1);
						font-size: 28rpx;
						font-weight: bold;
					}
					.day_statistics_select_right_item_active{
						background-color: #fff;
						color: rgba(255, 107, 0, 1);
					}
				}
			}
			.day_statistics_center{
				width: 702rpx;
				height: 212rpx;
				background-image: url('https://www.cccshansong.com/chong_weapp/day_statistics_bj.png');
				background-size: 100% 100%;
				margin: 0 auto;
				.day_statistics_center_top{
					width: 702rpx;
					height: 148rpx;
					display: flex;
					align-items: center;
					.day_statistics_center_item{
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;
						.day_statistics_center_item_shu{
							position: absolute;
							right: 0;
							bottom: 30rpx;
							width: 2rpx;
							height: 32rpx;
							background-color: rgba(255, 255, 255, 0.2);
						}
						.day_statistics_center_item_desc{
							color: rgba(255, 255, 255, 1);
							font-size: 24rpx;
							padding-top: 10rpx;
						}
						.day_statistics_center_item_name{
							text-align: center;
							color: rgba(255, 255, 255, 1);
							font-size: 48rpx;
							font-weight: 700;
							text{
								font-weight: 400;
								font-size: 24rpx;
								margin-left: 6rpx;
							}
						}
					}

				}
				.day_statistics_center_bottom{
					width: 702rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					color: rgba(255, 255, 255, 0.75);
					font-size: 22rpx;
					border-top: 2rpx solid rgba(255, 255, 255, 0.15);
				}
			}
		}
		.statistics_select_box{
			// margin-top: 18rpx;
			display: flex;
			align-items: center;
			width: 750rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.01);
			.statistics_select_item{
				height: 80rpx;
				line-height: 80rpx;
				width: 168rpx;
				text-align: center;
				color: rgba(96, 98, 102, 1);
				font-size: 32rpx;
				font-weight: bold;
				position: relative;
				.statistics_select_item_heng{
					position: absolute;
					bottom: 0;
					left:48rpx;
					width: 64rpx;
					height: 6rpx;
					background-color: rgba(255, 107, 0, 1);
					border-radius: 32rpx;
				}
			}
			.statistics_select_item_active{
				color: rgba(36, 40, 49, 1);
			}
		}
	}
</style>
